import { t } from 'i18next'
import React, { FC } from 'react'
import { Modal, RadioGroup, Button, Space, InputNumber } from '@kedacom/react-next'
import { useSettingMeetingStore } from './store'
import shallow from 'zustand/shallow'
import { DelayMeetingWrap, DelayMetingStyledBtn } from './style'
import useLock from '@/hooks/useLock'

const DelayMeeting: FC = () => {
	const {
		showDelayMeeting,
		update,
		delayMeeting,
		showInputMinter,
		customMinuter,
		inputMinuter,
		remainTime,
		noDelayMeeting,
		fromComet,
		remainTimeColor,
	} = useSettingMeetingStore(
		(state) => ({
			showDelayMeeting: state.showDelayMeeting,
			update: state.update,
			delayMeeting: state.delayMeeting,
			noDelayMeeting: state.noDelayMeeting,
			showInputMinter: state.showInputMinter,
			customMinuter: state.customMinuter,
			inputMinuter: state.inputMinuter,
			remainTime: state.remainTime,
			fromComet: state.fromComet,
			remainTimeColor: state.remainTimeColor,
		}),
		shallow
	)
	const handleOk = useLock(async () => {
		await delayMeeting()
	})
	const handleNo = useLock(async () => {
		await noDelayMeeting()
	})
	return (
		<Modal
			width={608}
			height={328}
			open={showDelayMeeting}
			style={{ padding: '14px 18px' }}
			// style={{ height: 'auto' }}
			title={t('延长会议')}
			needFooter={false}
			onCancel={() => {
				update({ showDelayMeeting: false })
			}}
		>
			<DelayMeetingWrap>
				<div className="text">
					<p>
						{t('当前会议剩余时间 :')}
						<span className="remain-time" style={{ color: remainTimeColor }}>
							{remainTime}
						</span>
					</p>
					<p>{t('请选择延长会议时间 : ')}</p>
					<div className="minute">
						<div>
							<RadioGroup
								value={customMinuter}
								options={[
									{ label: t('30分钟'), value: 30, width: 84 },
									{ label: t('60分钟'), value: 60, width: 84 },
									{ label: t('90分钟'), value: 90, width: 84 },
									{ label: t('自定义'), value: 0, width: 84 },
								]}
								onChange={(e, value, Item) => {
									// setValue(value)
									console.log(e, value, Item)
									if (value === 0) {
										update({
											showInputMinter: true,
											customMinuter: 0,
											inputMinuter: '',
										})
									} else {
										update({
											showInputMinter: false,
											customMinuter: value,
											inputMinuter: '',
										})
									}
								}}
							/>
						</div>
						{showInputMinter && (
							<div className="customMinuter">
								<InputNumber
									value={inputMinuter}
									width={67}
									maxLength={4}
									onChange={(e, v) => {
										update({
											inputMinuter: v,
										})
									}}
								/>
								<span className="label">{t('分钟')}</span>
							</div>
						)}
					</div>
				</div>
				<DelayMetingStyledBtn>
					<Space>
						<Button onClick={handleOk}>{t('延长')}</Button>
						{fromComet && <Button onClick={handleNo}>{t('不延长')}</Button>}
						<Button onClick={() => update({ showDelayMeeting: false })}>{t('取消')}</Button>
					</Space>
				</DelayMetingStyledBtn>
			</DelayMeetingWrap>
		</Modal>
	)
}
export default DelayMeeting
